import { useEffect, useState } from 'react'
import { Button, Radio, Swiper, Toast, Tabs } from 'antd-mobile'
import { Search } from 'react-vant';
import JX from '../../compution/jx/JX';
import Hot from '../../compution/hot/Hot';
import titlebg from '../../img/titlebg.png'
import styles from './home.module.css'
import qd from '../../img/qd.png'
import chang from '../../img/chang.png'
import sz from '../../img/sz.png'
import yao from '../../img/yao.png'
import hot_icon2 from '../../img/hot_icon2.jpg'
import lb1 from '../../img/lb1.jpg'
import lb2 from '../../img/lb2.jpg'
import lb3 from '../../img/lb3.jpg'
import grid1 from '../../img/grid1.jpg'
import grid2 from '../../img/grid2.jpg'
import grid3 from '../../img/grid3.jpg'
import grid4 from '../../img/grid4.jpg'
import grid5 from '../../img/grid5.jpg'
import grid6 from '../../img/grid6.jpg'
import grid7 from '../../img/grid7.jpg'
import grid8 from '../../img/grid8.jpg'
import grid9 from '../../img/grid9.jpg'
import grid10 from '../../img/grid10.jpg'
import grid11 from '../../img/grid11.jpg'
import grid12 from '../../img/grid12.jpg'
import grid13 from '../../img/grid13.jpg'
import ts1 from '../../img/ts1.png'
import ts2 from '../../img/ts2.png'
import ts3 from '../../img/ts3.png'
import ts4 from '../../img/ts4.png'
import ts5 from '../../img/ts5.png'
import ts6 from '../../img/ts6.png'
import ts7 from '../../img/ts7.png'
import nk from '../../img/nk.png'
import zhong from '../../img/zhong.png'
import { Grid } from 'react-vant'
// import { ShopO } from '@react-vant/icons'
import { useAppDispatch, useAppSelector } from '../../store/store'
import { fetchHomepageData } from '../../store/homepageSlice'

function Index() {
  const [value, setValue] = useState('');
  const dispatch = useAppDispatch();
  const { data, isLoading, error } = useAppSelector((state) => state.homepage);

  useEffect(() => {
    dispatch(fetchHomepageData());
  }, [dispatch]);


  const bannerImages = (data?.banners && data.banners.length > 0)
    ? data.banners.map((b) => b.image_new)
    : [lb1, lb2, lb3];
  const items = bannerImages.map((image, index) => (
    <Swiper.Item key={index}>
      <div
        className={styles.content}
        onClick={() => {
          Toast.show(`你点击了轮播图 ${index + 1}`)
        }}
      >
        <img src={image} alt={`轮播图${index + 1}`} style={{ width: '100%', height: '100%', }} />
      </div>
    </Swiper.Item>
  ))
  return (
    <div>
      <div>
        <img src={titlebg} alt="" width='420vh' height='120px' />
        <h2 className={styles.hh}>春雨医生</h2>
        <div style={{ display: 'flex', flex: 1 }}>
          <Search value={value} onChange={setValue}
            className={styles.search}
            shape='round'
            background='none'
            style={{ width: '90%' }}
            clearable placeholder="请输入搜索关键词" />
          <Button size='small' shape='rounded' color='success' className={styles.gb}>
            搜索
          </Button>

        </div>
        <img className={styles.qdd} src={qd} alt="" />
      </div>
      {/* 上面盒子 */}
      <div className={styles.sys}>
        <div className={styles.wenzi}>

          <span>      <Radio
            value='small'
            style={{
              '--icon-size': '18px',
              '--font-size': '14px',
              '--gap': '6px',
            }}
          >
            小
          </Radio>国家卫健委认证医疗机构</span>
          <span className={styles.yonghu}>1.83亿用户信赖</span>
        </div>
        {/* 3个盒子 */}
        <div className={styles.hz}>
          <div className={styles.zb}>
            <h2 className={styles.ch}>CHUNYU</h2>
            <p className={styles.wz}>快速问诊</p>
            <p className={styles.sj}>7x24小时 智能匹配医生</p>
            <img style={{ width: '150px' }} src={chang} alt="" />
          </div>
          <div className={styles.yb}>
            <div className={styles.zbb}>
              <img className={styles.zy} src={hot_icon2} alt="" />
              <h2>找医生</h2>
              <img className={styles.sz} src={sz} alt="" style={{ width: '53px', height: '38px' }} />
              <p className={styles.qg}>全国68万医生任你选</p>

            </div>
            <div className={styles.zbs}>
              <h2>送药上门</h2>
              <img className={styles.sz} src={yao} alt="" style={{ width: '53px', height: '38px' }} />
              <p className={styles.qg}>全国发货 正品保障</p>
            </div>
          </div>

        </div>
        {/* 轮播图 */}
        <div className={styles.lb}>
          {isLoading && <div style={{ padding: 12, color: '#999' }}>加载中...</div>}
          {error && <div style={{ padding: 12, color: 'red' }}>{error}</div>}
          <Swiper
            loop
            className={styles.lbt}
            autoplay
            onIndexChange={i => {
              console.log(i, 'onIndexChange1')
            }}
          >
            {items}
          </Swiper>
        </div>
        {/* 宫格 */}
        <div className={styles.gongg}>
          <Grid columnNum={7} className={styles.hg}>
            {[grid1, grid2, grid3, grid4, grid5, grid6, grid7, grid8, grid9, grid10, grid11, grid12, grid13].map((image, i) => {
              const texts = ['快速问诊', '专家咨询', '图文问诊', '视频问诊', '电话问诊', '健康体检', '药品查询', '医院挂号', '健康资讯', '疾病百科', '症状自查', '健康档案', '在线客服'];
              return (
                <Grid.Item
                  key={i}
                  icon={<img src={image} alt={`grid${i + 1}`} style={{ width: '32px', height: '32px' }} />}
                  text={texts[i]}
                />
              );
            })}
          </Grid>
        </div>
        {/* 专科门诊医生 */}
        <div className={styles.nan}>
          {/* <h2>专科门诊 <span className={styles.fz}>春雨高复诊率、高口碑名医</span></h2> */}
          <span className={styles.zk}>专科门诊</span>
          <span style={{ color: '#999', }} className={styles.fz}>春雨高复诊率、高口碑名医</span>
          <br />
          <div style={{ display: 'flex', marginTop: 20 }}>
            <img className={styles.zxs} src={nk} alt="" />
            <img className={styles.zxs} style={{ width: 180, height: 100, borderRadius: '10%' }} src={zhong} alt="" />
          </div>

        </div>
        {/* 精选医生 */}
        <JX />
        {/* 特色服务 */}
        <div className={styles.tsfw}>
          <div className={styles.ts}>
            <span className={styles.ff}>特色服务</span>
            <span className={styles.jj}>_站式医疗健康解决方案</span>
            <span className={styles.gg}>查看更多&gt;</span>

          </div>
          <div style={{ display: 'flex' }}>
            <div>
              <img src={ts1} style={{ width: "170px", borderRadius: '5%', marginRight: '15px', marginLeft: '15px' }} alt="" />
            </div>
            <div>
              <img style={{ width: "170px", borderRadius: '5%' }} src={ts2} alt="" />
            </div>
          </div>
          <div style={{ display: 'flex' }}>
            <div><img src={ts3} style={{ width: '170px', borderRadius: '5%', marginLeft: '15px', marginRight: '15px' }} alt="" /></div>
            <div><img src={ts4} style={{ width: '170px', borderRadius: '5%' }} alt="" /></div>
          </div>
          <div style={{ display: 'flex' }}>
            <div><img style={{ width: '110px', borderRadius: '5%', marginLeft: '15px', marginRight: '10px' }} src={ts5} alt="" /></div>
            <div><img style={{ width: '110px', borderRadius: '5%', marginRight: '10px' }} src={ts6} alt="" /></div>
            <div><img style={{ width: '110px', borderRadius: '5%', }} src={ts7} alt="" /></div>
          </div>
        </div>



      </div>
      <div>
        <Tabs
          style={{ background: '#fff', marginTop: 12 }}
        >
          {[
            { key: 'hot', title: '热点', content: <Hot /> },
            { key: 'expert', title: '专家科普', content: <div>专家科普内容</div> },
            { key: 'life', title: '生活', content: <div>生活内容</div> },
            { key: 'mother', title: '母婴', content: <div>母婴内容</div> },
            { key: 'debunk', title: '辟谣', content: <div>辟谣内容</div> },
          ].map((tab) => (
            <Tabs.Tab title={tab.title} key={tab.key}>
              {tab.content}
            </Tabs.Tab>
          ))}
        </Tabs>
      </div>
    </div>
  )
}

export default Index
